<template>
  <div>
    <div class="wrap">
      <div class="filter-wrap">
        <div class="filter-box">
          <div
            class="filter-row location"
            v-for="conditionInfo in conditionInfos"
            :key="conditionInfo.id"
          >
            <span class="title">{{ conditionInfo.attrname }}：</span>
            <span class="content">
              <a
                href="javascript:;"
                v-for="attr in conditionInfo.attrlist"
                :key="attr.id"
                >{{ attr.valueName }}</a
              >
            </span>
          </div>
        </div>

        <div class="bottom-box">
          <div class="expect">
            <a href="">
              <input type="checkbox" />
              <span>根据简历精准匹配</span>
            </a>
            <div class="count">共<span>28+</span>公司</div>
          </div>

          <div class="card">
            <Card
              v-for="companyInfo in companyInfos"
              :key="companyInfo.id"
              :companyInfo="companyInfo"
            >
              <img :src="companyInfo.logoUrl" alt="" />
            </Card>
          </div>

          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout=" prev, pager, next"
              :total="total"
              background
              align="center"
            >
            </el-pagination>
          </div>
        </div>

        <div class="footer">
          <div class="pos-bread">
            <a href="">首页></a>
            <a href="">公司大全></a>
            <a href="">全国></a>
            <a href="">行业不限</a>
          </div>

          <div class="tabs">
            <template>
              <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
                <el-tab-pane label="热门职位" name="first">
                  <a href="">深圳销售顾问招聘</a>
                  <a href="">深圳销售顾问招聘</a>
                  <a href="">深圳销售顾问招聘</a>
                  <a href="">深圳销售顾问招聘</a>
                  <a href="">深圳销售顾问招聘</a>
                </el-tab-pane>
                <el-tab-pane label="热门城市" name="second">
                  <a href="">北京招聘</a>
                  <a href="">北京招聘</a>
                  <a href="">北京招聘</a>
                  <a href="">北京招聘</a>
                  <a href="">北京招聘</a>
                </el-tab-pane>
                <el-tab-pane label="热门企业" name="third">
                  <a href="">华为</a>
                  <a href="">腾讯</a>
                  <a href="">小米</a>
                  <a href="">中软</a>
                  <a href="">怒五杀O</a>
                </el-tab-pane>
                <el-tab-pane label="附近城市" name="fourth">
                  <a href="">广州招聘信息</a>
                  <a href="">深圳招聘信息</a>
                  <a href="">上海招聘信息</a>
                  <a href="">稍安招聘信息</a>
                  <a href="">哈哈招聘信息</a>
                </el-tab-pane>
              </el-tabs>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Card from "./components/Card.vue";
import { reqGetCompanyInfo, reqGetConditionInfo } from "@/api/company";
export default {
  name: "MyCompany",
  components: {
    Card,
  },
  data() {
    return {
      // 选项卡切换的数据
      activeName: "second",
      currentPage: 1,
      pageSize: 5,
      total: 100,
      companyInfos: [],
      conditionInfos: [],
    };
  },
  methods: {
    // 获取公司页面导航栏信息
    async getConditionInfo() {
      const result1 = await reqGetConditionInfo();
      this.conditionInfos = result1;
      console.log(result1);
    },
    // 获取公司页面列表数据信息,
    async getCompanyInfo() {
      const result = await reqGetCompanyInfo();
      this.companyInfos = result;
    },
    // 选项卡切换的函数
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 分页器
    handleSizeChange(newPageSize) {
      console.log(newPageSize);
    },
    // 分页器
    handleCurrentChange(newCurrentPage) {
      console.log(newCurrentPage);
    },
  },
  // 上来就请求一次数据
  mounted() {
    this.getCompanyInfo();
    this.getConditionInfo();
  },
};
</script>

<style lang="less" scoped>
.wrap {
  .filter-wrap {
    width: 100%;
    height: 100%;
    .filter-box {
      min-width: 1184px;
      margin: 0 auto;
      padding: 30px 0;
      background-color: #fff;
      line-height: 25px;
      color: #414a60;
      font-size: 14px;
      .filter-row {
        margin: 0 auto 13px;
        width: 1184px;
        .title {
          float: left;
          width: 70px;
          font-weight: 500;
        }
        .content {
          a {
            text-decoration: none;
            display: inline-block;
            margin-right: 6px;
            padding: 0 8px;
            color: #61687c;
            &:hover {
              color: #00c2b3;
            }
          }
          a:first-child {
            color: #00c2b3 !important;
          }
        }
      }
    }
    .bottom-box {
      width: 100%;
      background-color: #f6f6f8;
      .expect {
        width: 1184px;
        height: 82px;
        margin: 0 auto;
        padding: 27px auto;
        padding: 0;
        font-size: 14px;
        line-height: 26px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        a {
          text-decoration: none;
          font-size: 16px;
          color: #00c2b3;
        }
        div {
          font-size: 14px;
          line-height: 26px;
          span {
            color: #00c2b3;
          }
        }
      }
      .card {
        width: 1184px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap; //换行
      }
      .pagination {
        width: 1184px;
        margin: 0 auto;
        .el-pagination {
          margin: 0px auto;
          padding: 0px 0px 30px 0px;
        }
      }
    }
    .footer {
      width: 100%;
      background: #fff;
      padding: 20px 0 10px;
      color: #8d92a1;

      .pos-bread {
        margin: 0 auto;
        width: 1184px;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #cacdd1;
        padding-top: 4px;
        padding-bottom: 10px;
        font-size: 12px;
        a {
          text-decoration: none;
          color: #9fa3b0;
        }
      }
      .tabs {
        margin: 20px auto;
        width: 1184px;
        a {
          font-size: 12px;
          color: #8d92a1;
          margin: 0 30px 0 0;
          line-height: 35px;
          display: inline-block;
          text-decoration: none;
        }
      }
    }
  }
}
</style>
